:root{
  --bg: linear-gradient(135deg,#f3f4f6,#e5e7eb);
  --card: rgba(255,255,255,0.95);
  --text: #111827;
  --accent: #4f46e5;
  --shadow: rgba(0,0,0,0.1);
  --done: #16a34a;
  --pending: #dc2626;
}

body.theme1{--bg:linear-gradient(135deg,#4facfe,#00f2fe);--accent:#2563eb;}
body.theme2{--bg:linear-gradient(135deg,#ff9a9e,#fad0c4);--accent:#e11d48;}
body.theme3{--bg:linear-gradient(135deg,#84fab0,#8fd3f4);--accent:#10b981;}
body.theme4{--bg:linear-gradient(135deg,#a18cd1,#fbc2eb);--accent:#8b5cf6;}
body.dark{--bg:#121212;--card:rgba(30,30,30,0.95);--text:#eee;--accent:#60a5fa;--done:#22c55e;--pending:#ef4444;}

body{
  font-family:'Poppins',sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  padding:30px 15px;
  color:var(--text);
  transition:all 0.4s ease;
}

.app{
  background: var(--card);
  border-radius:20px;
  width:750px;
  max-width:95%;
  padding:30px;
  box-shadow:0 8px 25px var(--shadow);
  transition:background 0.4s,color 0.4s;
}

header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;}
.title-area{display:flex;flex-direction:column;gap:4px;}
h1{font-size:2rem;margin:0;font-weight:700;}
h1 span{color:var(--accent);}
.by{font-size:0.9rem;color:var(--accent);margin:0;}
#theme-toggle{background:var(--accent);border:none;border-radius:10px;color:#fff;padding:10px 14px;font-size:16px;cursor:pointer;transition:0.3s;}
#theme-toggle:hover{opacity:0.8;}

form{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
form input,form textarea,form button{padding:12px;border:none;border-radius:10px;font-size:16px;resize:none;}
form button{background:var(--accent);color:#fff;cursor:pointer;font-weight:600;transition:0.3s;}
form button:hover{opacity:0.8;}

.filter-box{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;border:2px solid var(--accent);padding:10px;border-radius:12px;}
.filter-box input{flex:1;padding:10px;border-radius:8px;border:1px solid #aaa;}
.filter-box select{padding:10px;border-radius:8px;border:1px solid #aaa;}
.filter-box button{padding:10px;border-radius:8px;border:none;background:var(--accent);color:#fff;cursor:pointer;}
.filter-box button:hover{opacity:0.8;}

.stats{display:flex;justify-content:space-between;margin-bottom:20px;font-weight:600;font-size:16px;}
.stat{padding:8px 14px;border-radius:10px;border:2px solid transparent;}
.stat.total{border-color:var(--accent);color:var(--accent);}
.stat.done{border-color:var(--done);color:var(--done);}
.stat.pending{border-color:var(--pending);color:var(--pending);}

ul{list-style:none;padding:0;margin:0;width:100%;}
li{
  background: var(--card);
  border-left:5px solid var(--accent);
  border-radius:12px;
  padding:15px;
  margin-bottom:12px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  font-size:17px;
  transition:all 0.3s ease;
  word-wrap:break-word;
  cursor:grab;
  opacity:0;
  transform:scale(0.9);
}
li.show{opacity:1;transform:scale(1);}
li.completed{border-left-color:var(--done);text-decoration:line-through;opacity:0.7;}

li:hover{background:linear-gradient(90deg,var(--accent)10%,var(--card)90%);}
li:active{transform:scale(1.03);box-shadow:0 8px 20px rgba(0,0,0,0.3);transition:0.2s;}

li .info{flex:1;}
li .info h3{margin:0;font-size:18px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:flex;align-items:center;gap:6px;}
li .info p{margin:5px 0 8px 0;font-size:15px;white-space:pre-wrap;}
li small{font-size:13px;opacity:0.8;}

.actions button{border:none;padding:8px 12px;border-radius:8px;cursor:pointer;font-size:14px;margin-left:5px;transition:0.2s;}
.actions .done{background:var(--done); color:#fff;}
.actions .delete{background:var(--pending); color:#fff;}
.actions .edit{background:var(--accent); color:#fff;}
.actions button:hover{transform:scale(1.1);}

.badge{padding:2px 6px;border-radius:5px;font-size:12px;font-weight:600;animation:fadeIn 0.5s ease; color:#fff;}
.badge.pending{background:var(--pending);}
.badge.completed{background:var(--done);}

.danger{width:100%;padding:12px;border:none;border-radius:10px;background:var(--pending);color:white;font-size:16px;cursor:pointer;transition:0.3s;}
.danger:hover{opacity:0.8;}

.undo-box{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--accent);
  color:#fff;
  padding:10px;
  border-radius:10px;
  margin-bottom:10px;
  display:none;
  animation:slideIn 0.4s ease;
}
.undo-box button{background:#fff;color:var(--accent);border:none;padding:6px 10px;border-radius:6px;cursor:pointer;font-weight:600;}

footer{margin-top:30px;padding:15px 0;text-align:center;color:var(--accent);font-weight:600;border-top:2px solid var(--accent);}

@keyframes fadeIn{from{opacity:0;transform:scale(0.8);}to{opacity:1;transform:scale(1);}}
@keyframes slideIn{from{opacity:0;transform:translateY(-20px);}to{opacity:1;transform:translateY(0);}}

@media(max-width:768px){.app{width:95%;padding:20px;}li .info h3{max-width:180px;}}